<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <title>人间书</title>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/worldbook.css"/>
</head>
<body>
    <div id="app">
        <div class="download" v-if="showdownload">
            <div class="download-box">
                <div class="download-box-title">感谢下载</div>
                <div class="download-tip"></div>
                <div class="download-btns">
                    <button type="button" class="cancel-btn" @click="showdownload=false">取消</button>
                    <button type="button" class="ok-btn" @click="startDownload">确定</button>
                </div>
            </div>
        </div>
        <div class="download" v-if="showmsg" style="z-index: 200;">
            <div class="download-box" style="height: 150px;">
                <div class="download-box-title">提示</div>
                <div class="download-tip" id="msg"></div>
                <div class="download-btns">
                    <button type="button" class="ok-btn" @click="showmsg=false" style="margin-left: 140px;width: 90px;">确定</button>
                </div>
            </div>
        </div>
        <div class="download" v-if="showexit">
            <div class="download-box">
                <div class="download-box-title">退出</div>
                <div class="download-tip">您确定要退出吗?</div>
                <div class="download-btns">
                    <button type="button" class="cancel-btn" @click="showexit=false">取消</button>
                    <button type="button" class="ok-btn" @click="exit">确定</button>
                </div>
            </div>
        </div>
        <div class="download" v-if="showupload">
            <div class="upload-box">
                <div class="download-box-title">感谢上传</div>
                <div class="download-tip">选一本你喜欢的书和大家分享吧</div>

                <div class="layui-input-block upload-file-name" style="min-height: 34px;height: 34px; margin-left: 20px;margin-top: 10px;width: 220px;border-color: #d8d5c4;">
                    <input type="text" placeholder="书名" autocomplete="off" v-model="filename" class="layui-input upload-file-name-input">
                </div>
                <div class="upload-select">选择文件
                    <form id="bookfileform" enctype="multipart/form-data">
                        <input type="file" id="file-input" ref="fileinput">
                    </form>

                </div>
                <div class="download-btns">
                    <button type="button" class="cancel-btn" @click="showupload=false">取消</button>
                    <button type="button" class="ok-btn" @click="uploadfile">确定</button>
                </div>
            </div>
        </div>
        <div class="download" v-if="showlogon">
            <div class="logon-box">
                <div class="download-box-title">登录</div>
                <div class="download-tip">新用户将会自动注册</div>
                <div class="layui-input-block username-input" style="min-height: 32px;height: 32px; margin-left: 20px;">
                    <input type="text" placeholder="用户名" autocomplete="off" class="layui-input username" v-model="username">
                </div>

                <div class="layui-input-inline password-input" style="min-height: 32px;height: 32px; margin-left: 20px;">
                    <input type="password" placeholder="密码" autocomplete="off" class="layui-input password" v-model="password">
                </div>

                <div class="download-btns">
                    <button type="button" class="cancel-btn" @click="showlogon=false" style="width: 100px;">取消</button>
                    <button type="button" class="ok-btn" style="width: 205px;" @click="login">登录</button>
                </div>
            </div>
        </div>
        <div class="layui-container header">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <p class="title2">理想之上是</p>
                    <p class="title">人间书</p>
                    <p>{{today}}</p>
                </div>
                <div class="layui-col-md6 layui-form" style="padding-top: 43px;">
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 0;position: relative;">
                            <input type="text" placeholder="你当像鸟飞往你的山" autocomplete="off" class="layui-input search-input" v-model="keyword">
                            <div class="search" @click="searchbook"><i class="layui-icon layui-icon-search" style="font-size: 26px; color: #b2b2b2;"></i></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3" style="height: 100px">


                </div>
            </div>
        </div>
        <div class="content">

            <div class="left">
                <div class="middle">
                    <div class="fixed-text">布衣暖，菜根香，诗书滋味长</div>
                    <div class="upload">人间书和你一起建造人间书屋，<span @click="showUpload" class="upload-click">点击 <i class="layui-icon">&#xe67c;</i></span>，上传一本你最喜欢的书和大家分享吧</div>
                </div>
                <div class="books">

                    <div class="book" v-if="showRecommendationDetail">
                        <div class="book-cover">
                            <img :src="recommendationBookDetail.coverUrl" height="220px" class="img">
                        </div>
                        <div class="book-info">
                            <div class="book-name"><span @click="showDownload(recommendationBookDetail.id ,recommendationBookDetail.bookName, recommendationBookDetail.fileName, recommendationBookDetail.downloadNum)" class="book-click">{{recommendationBookDetail.bookName}}</span></div>
                            <div class="book-author"><span style="color: #666666;">作者：</span>{{recommendationBookDetail.author}}</div>
                            <div class="book-upload"><span style="color: #666666;">上传时间：</span>{{recommendationBookDetail.uploadTime}}</div>
                            <div class="book-introduction"><span style="color: #666666;">内容简介：</span>{{recommendationBookDetail.contentIntroduction}}</div>
                        </div>
                    </div>

                    <div class="book" v-for="book in booklist" v-if="notShowSearchResult">
                        <div class="book-cover">
                            <img :src="book.coverUrl" height="220px" class="img">
                        </div>
                        <div class="book-info">
                            <div class="book-name"><span @click="showDownload(book.id ,book.bookName, book.fileName, book.downloadNum)" class="book-click">{{book.bookName}}</span></div>
                            <div class="book-author"><span style="color: #666666;">作者：</span>{{book.author}}</div>
                            <div class="book-upload"><span style="color: #666666;">上传时间：</span>{{book.uploadTime}}</div>
                            <div class="book-introduction"><span style="color: #666666;">内容简介：</span>{{book.contentIntroduction}}</div>
                        </div>
                    </div>

                    <div class="book" v-for="book in searchresultlist" v-if="!notShowSearchResult">
                        <div class="book-cover">
                            <img :src="book.coverUrl" height="220px" class="img">
                        </div>
                        <div class="book-info">
                            <div class="book-name"><span @click="showDownload(book.id ,book.bookName, book.fileName, book.downloadNum)" class="book-click">{{book.bookName}}</span></div>
                            <div class="book-author"><span style="color: #666666;">作者：</span>{{book.author}}</div>
                            <div class="book-upload"><span style="color: #666666;">上传时间：</span>{{book.uploadTime}}</div>
                            <div class="book-introduction"><span style="color: #666666;">内容简介：</span>{{book.contentIntroduction}}</div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="right">
                <div class="profile">
                    <div class="no-logon" v-if="nologon">您还未登录，<span class="logon-click" @click="showLogon">点击登录</span></div>
                    <div class="home" v-if="!nologon">
                        <div class="home-top">
                            <div class="home-username" @click="showexit=true">{{username}}</div>
                            <div class="home-score">积分：{{score}} 分</div>
                            <div class="clear"></div>
                        </div>

                        <div class="home-info">您上传过 <span style="color: #003128;">{{uploadBookNum}}</span> 本书，累计下载 <span style="color: #003128;">{{downloadBookNum}}</span> 次，待审核 <span style="color: #003128;">0</span> 本</div>
                    </div>
                </div>
                <div class="right-bottom">
                    <div style="padding-top:15px;color: #003128;text-align: center;">···吹灭读书灯，一身都是月···</div>
                    <div style="color: #666666;padding-top: 15px;text-align: center;">为你推荐</div>
                    <ul class="recommendation">

                        <li v-for="(recommendation,index) in recommendationlist"><span class="recommendation-name" @click="showRecommendation(index)">{{recommendation.bookName}}</span><span style="color: #666666;">（{{recommendation.author}}）{{recommendation.score}}分</span></li>

                    </ul>
                </div>

            </div>
            <div class="clear"></div>
        </div>

    </div>
    <script src="js/worldbook.js"></script>
    <script type="text/javascript">
        layui.use('form', function(){
            var form = layui.form;
        });
        windowAddMouseWheel();
        function windowAddMouseWheel() {
            var scrollFunc = function (e) {
                e = e || window.event;
                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                    if (e.wheelDelta > 0 || e.wheelDelta < 0) {
                        console.log("鼠标滑动")
                        let box = document.getElementsByClassName("download")
                        let appHeight = document.getElementById("app").offsetHeight
                        if(box.length > 0){
                            box[0].style.height = appHeight + "px"
                        }
                    }
                } else if (e.detail) {  //Firefox滑轮事件
                    if (e.detail> 0 || e.detail< 0) {
                        console.log("鼠标滑动")
                        let box = document.getElementsByClassName("download")
                        let appHeight = document.getElementById("app").offsetHeight
                        if(box.length > 0){
                            box[0].style.height = appHeight + "px"
                        }
                    }
                }
            };
            //给页面绑定滑轮滚动事件
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollFunc, false);
            }
            //滚动滑轮触发scrollFunc方法
            window.onmousewheel = document.onmousewheel = scrollFunc;
        }
    </script>
</body>
</html>
